const { Component } = require("react");


class DemoA extends Component {
  constructor(props) {
    super(props)
    console.log("constructor...", props);
    this.state = {
      num: 1
    }
    this.add = this.add.bind(this);
  }
  add() {
    this.setState((state, props) => ({ num: state.num + 1 }))
  }

  renderHn() {
    // 在render函数中间接地调用了setState
    this.setState({ num: 666 });
    return <h1>我是h1</h1>
  }

  // 返回了组件的视图的结构，类似于vue中的模板。
  // 它的背后会产生一颗Fiber树，在Vue中叫虚拟DOM。
  // 早期的React也是使用虚拟DOM
  render() {
    console.log("render...");

    // 在reander函数中，不能调用setState，会导致死循环
    // 下面的代码是直接调用了setState，有可能会间接调用
    // this.setState({
    //   num:110
    // })


    // 第一次调用render产生一颗Fiber树，转化成真实DOM，进行挂载
    // 当调用setState，重新render，就会产生个颗新的Fiber
    // 新旧Fiber树会进行协调运算，类似于Vue中的DOM Diff。
    // 对比后，找到差异，进行提交更新。
    let { num } = this.state;
    return (
      <div>
        <h2>类组件</h2>
        <h3>{num}</h3>
        {/* <h3>{this.renderHn()}</h3> */}
        <button onClick={this.add}>+1</button>
      </div>
    )
  }

  componentDidUpdate() {
    console.log("componentDidUpdate...");
  }

  componentDidMount() {
    console.log("componentDidMount...");
  }
}

export default DemoA;
